<template>
    <div>

        <crumbs></crumbs>
        <div class="name">流程启动订制</div>
        <div class="total">

            <!-- myselect -->
            <div class="selecttop">
                <div class="left">
                    <el-select v-model="form.name" filterable placeholder="名称" size="large" @change="search" class="select">
                        <el-option label="市级" value="市级" />
                        <el-option label="经济技术开发区" value="经济技术开发区" />
                        <el-option label="黄园区" value="黄园区" />
                    </el-select>

                </div>
                <div class="left">
                    <el-select v-model="form.p_name" filterable placeholder="流程名称" size="large" @change="search"
                        class="select">
                        <el-option label="市级" value="市级" />
                        <el-option label="经济技术开发区" value="经济技术开发区" />
                        <el-option label="通用区县流程" value="通用区县流程" />
                    </el-select>

                </div>


            </div>
            <!-- pickdata -->
            <div class="block">

                <el-date-picker v-model="value1" type="datetimerange" range-separator="To" start-placeholder="Start date"
                    end-placeholder="End date" class="pick" />
            </div>
            <!-- asearch -->
            <div class="top">
                <div class="right">
                    <el-input v-model="input" class="w" size="large" placeholder="请输入名称关键字" />
                    <div class="button">
                        <el-button type="primary" class="btn" @click="search">搜索</el-button>
                    </div>
                </div>
                <div class="button1">
                    <el-button type="primary" class="btn1" @click="addApprove">新建启动</el-button>
                </div>

                <!-- 弹窗 -->
                <el-dialog v-model="dialogFormVisible" title="新建流程">
                    <el-from v-model="formData">
                        <div class="input">
                            <p>类：</p>
                            <el-input v-model="field" placeholder="请输入lei" class="elinput" />
                        </div>
                        <div class="input">
                            <p>字段：</p>
                            <el-input v-model="l_name" placeholder="请输入id" class="elinput" />
                        </div>
                        <div class="input">
                            <p>名称：</p>
                            <el-input v-model="name" placeholder="请输入名称" class="elinput" />
                        </div>
                        <div class="input">
                            <p>流程名称：</p>
                            <el-input v-model="p_name" placeholder="请输入流程名称" class="elinput" />
                        </div>

                    </el-from>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="addLaunch">保存</el-button>
                            <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
                        </span>
                    </template>
                </el-dialog>

            </div>
            <mybtn class="mybtn" :msg="jia"></mybtn>
        </div>
        <!-- list -->
        <div>
            <el-table :data="tableData" border style="width: 100%" #default="scope">
                <el-table-column prop="id" label="序号" align="center" />
                <el-table-column prop="name" label="名称" align="center" />
                <el-table-column prop="p_name" label="流程名称" align="center" />
                <el-table-column prop="p_time" label="创建时间" align="center" />
                <el-table-column label="操作" align="center">
                    <template #default="scope">

                        <el-button type="danger" @click="del(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>

                </el-table-column>
            </el-table>

        </div>

        <div style="margin-left: 20px;" id="pageall">
            <el-pagination :current-page="page.pageNum" :page-size="page.pageSize" :page-sizes="[2, 5, 10, 20]"
                layout="total, sizes, prev, pager, next, jumper" :total="totallenght" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import page from '@/components/ServiceManagement/list/page.vue'
import axios from 'axios'
import crumbs from "../../components/ServiceManagement/crumbs/crumbs.vue"
import mybtn from "../../components/ServiceManagement/table/mybtn.vue"

import { ref, toRefs, reactive, onMounted } from "vue"
import { defineComponent } from 'vue'
export default {
    name: "",
    setup() {
        //select
        const input = ref("")
        const value = ref("")
        const options = [
            {
                value: "OPtion1",
                label: "option1"
            }
        ]
        //pick

        const value1 = ref < [Date, Date] > ([
            new Date(2000, 10, 10, 10, 10),
            new Date(2000, 10, 11, 10, 10),
        ])
        const value2 = ref('')

        const shortcuts = [
            {
                text: 'Last week',
                value: () => {
                    const end = new Date()
                    const start = new Date()
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                    return [start, end]
                },
            },
            {
                text: 'Last month',
                value: () => {
                    const end = new Date()
                    const start = new Date()
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                    return [start, end]
                },
            },
            {
                text: 'Last 3 months',
                value: () => {
                    const end = new Date()
                    const start = new Date()
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                    return [start, end]
                },
            },
        ]
        const chongzhi = ref('重置 Resource')
        const jia = ref('添加')

        //asearch
        const quxiao = ref('取消')
        const baocun = ref('保存')
        const id = ref("")
        const field = ref("")
        const p_time = ref("")
        const formData = ref("")
        const l_name = ref("")
        const name = ref('')
        const p_name = ref("")

        const addApprove = () => {
            console.log("新建添加");
            data.dialogFormVisible = true
        }
        const data = reactive({
            dialogFormVisible: false
        })
        //list
        let tableData = ref([])

        const getDate = (timestamp) => {
            var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '/';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
            var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
            return Y + M + D + h + m + s;
        }
        for (let i = 0; i < tableData.value.length; i++) {
            tableData.value[i].p_time = getDate(tableData.value[i].p_time)
        }
        axios({
            url: "http://172.16.123.99:8080/start/findstartList",
            method: "get",
            params: {
                limit: 1,
                currentPage: 1,
                pageSize: 10
            }
        }).then(
            resp => {
                console.log(resp.data);
                tableData.value = JSON.parse(resp.data.data)
                const getDate = (timestamp) => {
                    var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                    var Y = date.getFullYear() + '/';
                    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
                    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                    var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
                    var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
                    var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                    return Y + M + D + h + m + s;
                }
                for (let i = 0; i < tableData.value.length; i++) {
                    tableData.value[i].p_time = getDate(tableData.value[i].p_time)
                }
            }
        )
        const addLaunch = () => {
            console.log("addLaunch");
            data.dialogFormVisible = false;
            axios({
                url: "http://172.16.123.99:8080/start/addstartmsg",
                method: "post",
                params: {
                    field: field.value,
                    l_name: l_name.value,
                    p_name: p_name.value,
                    name: field.value
                }
            }).then(
                resp => {
                    console.log(resp.data);
                    tableData.value.push({
                        field: field.value,
                        l_name: l_name.value,
                        p_name: p_name.value,
                        name: field.value
                    })
                    const getDate = (timestamp) => {
                        var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                        var Y = date.getFullYear() + '/';
                        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
                        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                        var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
                        var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
                        var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                        return Y + M + D + h + m + s;
                    }
                    for (let i = 0; i < tableData.value.length; i++) {
                        tableData.value[i].p_time = getDate(tableData.value[i].p_time)
                    }
                }
            )
        }

        const del = (index, row) => {
            ElMessageBox.confirm('确定删除该数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    url: 'http://172.16.123.99:8080/start/delstartmsg',
                    method: 'post',
                    params: {
                        id: row.id
                    }
                }).then((res) => {
                    if (res.data.code === 200) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功!'
                        });
                        tableData.value.splice(index, 1)

                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败!'
                        });
                    }
                }).catch((err) => {
                    console.log('错误了', err);
                })
            }).catch(() => {
                //点击了取消按钮
                ElMessage({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }


        let form = ref({
            p_name: "",
            name: ""
        })

        const search = () => {
            console.log("111111", input.value);
            axios({
                url: "http://172.16.123.99:8080/start/searchprocessmsg2",
                method: "post",
                params: {
                    currentPage: 1,
                    pageSize: 10,
                    name: input.value,
                    field: input.value,
                    p_name: input.value
                }
            }).then(
                resp => {
                    tableData.value = []
                    tableData.value = JSON.parse(resp.data.data)
                    console.log(tableData.value);
                    console.log(resp.data);
                    const getDate = (timestamp) => {
                        var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                        var Y = date.getFullYear() + '/';
                        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
                        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                        var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
                        var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
                        var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                        return Y + M + D + h + m + s;
                    }
                    for (let i = 0; i < tableData.value.length; i++) {
                        tableData.value[i].p_time = getDate(tableData.value[i].p_time)
                    }
                }
            )
        }
        //分页
        let totallenght = ref()
        const page = reactive({//配置对应的查询参数
            pageNum: 1,
            pageSize: 5,
        });
        function GetUserData() {
            axios({
                url: 'http://172.16.123.99:8080/start/findstartList',
                method: 'post',
                params: {
                    currentPage: page.pageNum,
                    pageSize: page.pageSize,
                }
            }).then(resp => {
                tableData.value = JSON.parse(resp.data.data)
                console.log('00000000', resp.data)
                totallenght.value = resp.data.conut
                console.log(66666666666, totallenght.value)
                const getDate = (timestamp) => {
                    var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                    var Y = date.getFullYear() + '/';
                    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
                    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                    var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
                    var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
                    var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                    return Y + M + D + h + m + s;
                }
                for (let i = 0; i < tableData.value.length; i++) {
                    tableData.value[i].p_time = getDate(tableData.value[i].p_time)
                }
            })
        }
        onMounted(() => {
            GetUserData()
        })
        const handleSizeChange = (val) => {
            page.pageSize = val
            console.log(val)
            GetUserData();
        }
        const handleCurrentChange = (val) => {
            page.pageNum = val
            console.log(val)
            GetUserData();
        }
        //3.导出   如果想要数据在外部渲染 必须得导出
        return {
            chongzhi,
            jia,
            mybtn,
            input,
            field,
            p_time,
            p_name,
            formData,
            value,
            options,
            quxiao,
            baocun,
            addApprove,
            ...toRefs(data),
            ref,
            del,
            tableData,
            ElMessage,
            ElMessageBox,
            addLaunch,
            search,
            l_name,
            name,
            id,
            totallenght,
            handleSizeChange,
            handleCurrentChange,
            page,
            form,
            getDate
        };
    },
    components: {
        crumbs,

    }
}
</script>
<style scoped>
.name {
    text-align: left;
    margin: 20px;
    font-weight: bold;
}

.total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.myselect {
    flex: 0.5;
}

.pickdata {
    flex: 0.5;
}

.asearch {
    flex: 4;

}

.mybtn {
    flex: 0.5;
}

.selecttop {
    display: flex;
}

.select {
    width: 134px;
    margin-right: 10px;
}

.left {
    display: flex;

}

.block {

    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
    margin-right: 10px;
    display: flex;
    justify-items: center;

}

.block:last-child {
    border-right: none;
}

.block .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.pick {
    height: 40px;
}




.top {
    display: flex;
    flex-direction: row;
    align-items: center;

    justify-content: space-between;
}

.mybtn {
    display: flex;
    flex-direction: row;
    align-items: center;

    justify-content: center;
}

.input {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.elinput {
    width: 90%;
}

.select {
    width: 134px;
}

.right {
    display: flex;
}

.w {
    height: 38px;
}


.button {
    margin-left: 10px;
}

.btn {
    height: 38px;

}

.button1 {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;


}

.btn1 {
    height: 38px;
    float: right;

}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}

#pageall {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
</style>